<template>
  <div :style="{ 'padding-left':showMobilePage ? '' : headerLeft, top:showMobilePage? '48px' : '' }" class="header-box">
    <ListTab
      v-model="activeChartTab"
      :tabs="listTabsData"
      :show-header="!showMobilePage"
      :height="showMobilePage?'40px':'48px'"
      show-drop
      show-delete
      is-self-tab
      padding-left="16px"
      @deleteTab="deleteTab"
      @handleTabClick="handleTabClick" />
  </div>
</template>
<script>
import ListTab from '@/components/ListTab';
import { mapState } from 'vuex';
// api
import { getChartTab } from '@/api/reportManage';

export default {
  components: { ListTab },
  model: {
    prop: 'activeChartTab',
    event: 'changeTab'
  },
  props: {
    activeChartTab: {
      type: Number | String,
      default: ''
    },
    isFullScreen: {
      type: Boolean,
      default: false
    }
  },
  data: () => {
    return {
      allChartTab: [],
      firstPage: null,
      chatOverview: {
        id: -10,
        name: '图表概览',
        disabledDel: true
      },
      showTabs: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage,
      'sidebar': state => state.app.sidebar
    }),
    headerLeft() {
      return this.isFullScreen ? 0 : this.sidebar.opened ? '168px' : '64px';
    },
    listTabsData() {
      const tabs = [this.chatOverview, ...this.showTabs];
      if (this.firstPage) {
        tabs.unshift(this.firstPage);
      }
      return tabs;
    }
  },
  methods: {
    handleTabClick(tab) {
      this.$emit('handleTabClick', tab);
    },
    getChartTab(callback) {
      getChartTab().then(res => {
        if (res.code === 200) {
          const firstPageList = res.data.filter(it => {
            return it.isFirstPage === 1 && it.isEnable === 1;
          });
          this.allChartTab = res.data;
          let activeTab = this.chatOverview.id;
          if (firstPageList.length) {
            firstPageList[0].disabledDel = true;
            this.firstPage = firstPageList[0];
            activeTab = firstPageList[0].id;
          }
          if (!Number(this.activeChartTab)) {
            this.$emit('changeTab', activeTab);
          } else if (this.activeChartTab !== -10) {
            const curTab = res.data.find(i => i.id === this.activeChartTab);
            const isExist = this.listTabsData.some(item => item.id === this.activeChartTab);
            if (curTab && !isExist) {
              this.showTabs = [curTab];
            } else if (!curTab) {
              // this.$emit('changeTab', activeTab);
            }
          }
          if (callback) {
            callback(res);
          }
        }
      }).catch(err => {
        callback && callback({}, err);
      });
    },
    deleteTab(tabItem) {
      if (tabItem.id === this.activeChartTab) {
        this.handleTabClick(-10);
      }
      this.showTabs = this.showTabs.filter(i => i.id !== tabItem.id);
    },
    tabClick(tabItem) {
      const isExist = this.listTabsData.some(item => item.id === tabItem.id);
      if (this.showTabs.length === 5 && !this.showTabs.find(i => tabItem.id === i.id)) {
        this.$message.warning('图表窗口打开已到上限，请先关闭其他窗口');
        return;
      } else if (!isExist) {
        this.showTabs.push(tabItem);
      }
      this.handleTabClick(tabItem.id);
    }
  }
};
</script>
<style scoped lang="scss">
.header-box {
  position: fixed;
  top: 0;
  left: 0;
  height: 48px;
  width: 100%;
  box-shadow: 1px 1px 4px 0 rgb(0,0,0,.1);
  z-index: 1;
}
</style>
